<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命令行工具的认识</title>
    <style>
        .module {
            padding: 16px;
            border-bottom: 2px solid #ddd;
        }
        .module-title{
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .flex-gap{
            display: flex;
            gap: 12px;
        }
        .cmd-group{
            border: 1px solid #ddd;
            padding: 10px;
        }
        .cmd-label{
            font-weight: 700;
            margin-right: 10px;
        }
        .margin-b-10{
         margin-bottom: 10px;
        }
    </style>
</head>
<body>

<div>
    <h3>命令行的常用操作</h3>
    <div  class="flex-gap margin-b-10">
        <div class="cmd-group">
            <span class="cmd-label">cd .. </span>
            <span>返回上级目录</span>
        </div>
        <div class="cmd-group">
            <span class="cmd-label">cd 文件名 </span>
            <span>进入某个文件夹</span>
        </div>
    </div>
    <div  class="flex-gap margin-b-10">
        <div class="cmd-group">
            <span class="cmd-label">dir /s </span>
            <span>递归展开 当前文件夹下的所有子文件 （慎用）</span>
        </div>
    </div>

    <img src="./image/1.png" alt="">
</div>
<!--<div style="display: flex;gap: 20px;flex-direction: column">-->
<!--    <h3>需求：电脑 使用命令行工具 打开QQ </h3>-->
<!--    <div>操作流程：</div>-->
<!--    <div class="module">-->
<!--        <div class="module-title" >第一步:打开命令行工具 (win + R  打开命令行快捷键)</div>-->
<!--&lt;!&ndash;        <img src="image/3.png" alt="" style="width: 400px">&ndash;&gt;-->
<!--    </div>-->
<!--    <div class="module">-->
<!--        <div class="module-title" >第二步:打开命令行工具</div>-->
<!--        <img src="image/3.png" alt="" style="width: 500px">-->
<!--    </div>-->


<!--</div>-->

</body>
</html>